<template>
  <!-- 主体容器 -->
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
    <!-- 文章详情容器 -->
    <div class="mx-auto w-full max-w-[1600px] px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
      <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">
        <!-- 主内容区 -->
        <main class="flex-1 min-w-0">
          <Article :article="article" />
        </main>
        <!-- 桌面端右侧目录 -->
        <Toc v-if="article && article.content" :contentHtml="article.content" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getArticleDetail } from '@/apis/blog/article'
const route = useRoute()
const article = ref()
onMounted(async () => {
  const id = Number(route.params.id)
  if (id) {
    article.value = await getArticleDetail(id)
  }
})
</script>
